
<template>
  <div class="data-set-wrap">
    <div class="main">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="fieldCnName" label="字段名称" />
        <el-table-column prop="fieldZhName" label="字段描述" />
        <el-table-column label="操作" width="250px">
          <template #default="scope">
            <el-button link type="primary" :underline="true" size="small">编辑</el-button>
            <el-button link type="danger" :underline="true"  size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import { tableSet, getlinks } from "@/components/low-code/data/index";

export default defineComponent({
  setup() {
    const tableData = ref<any>([]);
    const active = ref("");
    const onTableClick = (tb: { key: string; items: never[] }) => {
      tableData.value = tb.items;
      active.value = tb.key;
    };

    onMounted(() => {
      tableData.value = tableSet.value[0].items;
      active.value = tableSet.value[0].key;
    });

    return {
      active,
      tableData,
      tableSet,
      onTableClick,
    };
  },
});
</script>

<style  scoped>
.data-set-wrap {
  display: flex;
  padding: 10px;
}

.tb-unit {
  font-size: 14px;
  line-height: 28px;
  cursor: pointer;
  padding: 5px 15px;
}

.main {
  flex: 1;
  height: calc(100vh - 60px);
  overflow-y: auto;
  padding: 10px 10px;
}

.active {
  background: #409eff;
  color: white;
  border-radius: 5px;
}

.add-table{
  text-align: left;
  padding: 5px 0 10px 15px;
}
</style>
